/* eslint-disable no-undef */
import { messages } from "share/common";
import React from "react";
import { connect } from "react-redux";
import { Modal, Button, Input, message, Upload, Form, Spin } from "antd";
import menuRoute from "routes/menuRoute";
import mainService from "containers/main.service";

/**
 * 模拟扫描仪
 */
class MockScan extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      saveFolder: "C:\\HLY-Invoice",
      isScan: false,
      modalVisible: false,
    };
    this.firstScan = true;
    this.firstScanSuccess = false;
    this.chat = null;
    this.hasFile = false;
    this.initialed = false;
    this.openScannerInitialed = false;
    this.unmount = false;
    this.errorCode = 0;
  }

  componentDidMount() {
    console.log("正在使用模拟扫描仪...");
    console.log(
      "本地开发模式下默认使用模拟扫描仪，如果需要使用真实扫描仪，请修改main.service.js文件的checkScan方法"
    );
    this.initialed = true;
  }

  componentWillUnmount() {
    this.unmount = true;
  }

  showModal = () => {
    this.setState({
      modalVisible: true,
    });
  };

  closeModal = () => {
    this.setState({ modalVisible: false });
  };

  scan = () => {
    this.setState({ isScan: true });
    this.props.onStartScan();
  };

  handleUpload = (file) => {
    new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = (error) => reject(error);
    }).then((base64) => {
      this.setState({
        modalVisible: false,
      });
      let imageData = base64.substr(base64.indexOf(",") + 1);
      this.props.onScan({
        imageData: imageData,
      });
    });
    return false;
  };

  render() {
    const { children, buttonProps, enableScan } = this.props;
    const { modalVisible, saveFolder, isScan } = this.state;

    return (
      <Button onClick={this.showModal} {...buttonProps}>
        {children}
        <Modal
          title="模拟扫描仪"
          visible={modalVisible}
          onOk={this.scan}
          onCancel={this.closeModal}
          okText={messages("common-1.key31") /*扫描*/}
        >
          {isScan ? (
            <div>
              <Upload
                style={{ marginRight: 16 }}
                showUploadList={false}
                beforeUpload={this.handleUpload}
              >
                <Button>上传文件</Button>
              </Upload>
              (上传发票图片)
            </div>
          ) : (
            <div>
              <div style={{ lineHeight: `33px` }}>
                这是本地开发模式下默认使用的模拟扫描仪，点击扫描可进入扫描模式。
              </div>
              <div> </div>
              <div style={{ fontSize: 12, color: "#999" }}>
                如果需要在本地开发模式下使用真实扫描仪，请修改
                <code>main.service.js</code>文件的
                <code>checkScan</code>方法
              </div>
            </div>
          )}
        </Modal>
      </Button>
    );
  }
}

MockScan.propTypes = {
  onScan: React.PropTypes.func,
  onStartScan: React.PropTypes.func,
  onEventTrack: React.PropTypes.func,
};

function mapStateToProps(state) {
  return {
    enableScan: state.main.enableScan,
  };
}

export default connect(mapStateToProps)(MockScan);
